<template>
  <div class="b-website-add">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="网站SEO标题：" prop="title">
        <el-col :span="12">
          <el-input
            name="title"
            v-model="ruleForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="网站SEO关键词：" prop="keyword">
        <el-col :span="12">
          <el-input
            name="keyword"
            v-model="ruleForm.keyword"
            placeholder="请输入关键词"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="网站SEO描述：" prop="description">
        <el-col :span="12">
          <el-input
            type="textarea"
            :rows="3"
            name="description"
            v-model="ruleForm.description"
            placeholder="请输入SEO描述"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="网站logo：" prop="cate">
        <el-col :span="3">
          <el-upload class="avatar-uploader" action="" :show-file-list="false">
            <img
              v-if="ruleForm.logoUrl"
              :src="ruleForm.logoUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item label="网站图标：" prop="icon">
        <el-col :span="3">
          <el-upload class="avatar-uploader" action="" :show-file-list="false">
            <img
              v-if="ruleForm.iconUrl"
              :src="ruleForm.iconUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "BWebSiteAdd",
  data() {
    return {
      ruleForm: {
        title: "使用 vue-cli 创建项目",
        keyword: "vue, vue-cli, 创建项目,vue项目,脚手架",
        description: "vue, vue-cli, 创建项目,vue项目,脚手架",
        logoUrl: "",
        iconUrl: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        keyword: [{ required: true, message: "请输入关键词", trigger: "blur" }],
        description: [
          { required: true, message: "请输入SEO描述", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      console.log(formName);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.b-website-add {
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
</style>
